

<template>
<div>
  <!--      标题-->
  <div class="title">设置</div>
  <div  style="height: calc(100vh - 120px);overflow: auto;padding: 10px;">

    <div style="margin-top: 20px;">
      <fieldset>
        <legend>
          <span class="required">* 票据设置</span>
        </legend>
        <div>
          <table>
            <tbody>
            <tr>
              <td colspan="6" style="padding-bottom: 10px;">
                在摄像头下放入一张票据，直到左侧图像中显示票据的绿色描边框，然后点识别，将保存票据的最小面积，小于此面积5%大小的票据不会识别。
              </td>
            </tr>
            <tr>
              <td>
                票据最小面积
              </td>
              <td>
                <JInput v-model="state.maxArea"></JInput>
              </td>
              <td>
                <JButton @click="takeArea" type="info">识别</JButton>
              </td>
              <td>
                打印机名称
              </td>
              <td>
                <JInput placeholder="打印机名称" v-model="state.sendPrintName"></JInput>
              </td>
              <td>

              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </fieldset>
    </div>
    <div style="margin-top: 10px;">
      <fieldset>
        <legend>
          <span class="required">* 票据识别信息配置</span>
        </legend>
        <div class="goods">
          <div style="padding-bottom: 10px;">
            <div style="height: 10px;"></div>
            <j-button @click="add">新增</j-button>
            <div style="height: 10px;"></div>
            <div style="margin-left: 10px;">
              <table>
                <thead>
                <tr>
                  <th style="width: 80px;">序号</th>
                  <th style="width: 300px;">票据标题</th>
                  <th style="width: 120px;">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in state.billInfos" :key="index">
                  <td class="tc">{{index+1}}</td>
                  <td>{{item.billTitle}}</td>
                  <td class="tc">
                    <tiny-link @click="alt(item, index)">修改</tiny-link>
                    <tiny-link style="margin-left: 30px;"  @click="del(item, index)">删除</tiny-link>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </fieldset>
    </div>
  </div>
  <div style="text-align: center;margin-top: 20px;">
    <j-button type="info" size="large" @click="save">保存</j-button>
  </div>
  <tiny-dialog-box v-model:visible="showPop" width="1200px" title="票据配置" top="10"  >
    <div style="height: 400px;overflow: auto;">
      <div style="margin-top: 10px;margin-left: 20px;display: flex;">
        <div style="height: 30px;line-height: 30px;"> <span class="required">* 票据标题</span></div>
        <div style="margin-left: 10px;">
          <j-input v-model="billTitle"></j-input>
        </div>
      </div>
      <div style="margin-top: 10px;">
        <fieldset>
          <legend>
            <span class="required">* 票据头部信息</span>
          </legend>
          <div>
            <div style="padding-bottom: 10px;">
              <table>
                <tbody>
                <tr>
                  <td>日期元素标题:</td>
                  <td><JInput v-model="headSets.billDate"></JInput></td>
                  <td>
                    如: 日期：，时间：，票据日期：  (包含冒号)
                  </td>
                  <td> 长度</td>
                  <td>
                    <JInput v-model="headSets.billDateLen"></JInput>
                  </td>
                  <td colspan="3">
                    如: 2025-01-01  为 10
                  </td>
                </tr>
                <tr>
                  <td>票号元素标题:</td>
                  <td><JInput  v-model="headSets.billNo"></JInput></td>
                  <td>
                    如: 票号:，编号：  (包含冒号)
                  </td>
                  <td> 最小长度</td>
                  <td>
                    <JInput  v-model="headSets.billMinLen"></JInput>
                  </td>
                  <td style="width: 80px;"> 最大长度</td>
                  <td>
                    <JInput style="width: 60px;" v-model="headSets.billMaxLen"></JInput>
                  </td>
                  <td >
                    如: XS20250101-1  为 12
                  </td>
                </tr>
                <tr>
                  <td>客户元素标题：</td>
                  <td>
                    <JInput  v-model="headSets.buName"></JInput>
                  </td>
                  <td>如： 客户：，客户名称：</td>
                  <td>
                    紧接下一元素的标题
                  </td>
                  <td>
                    <JInput v-model="headSets.buNameNext"></JInput>
                  </td>
                  <td colspan="3">如： 电话：，如果已经是表头的最后一个元素，留空</td>
                </tr>
                <tr>
                  <td>地址元素标题：</td>
                  <td>
                    <JInput  v-model="headSets.address"></JInput>
                  </td>
                  <td>如： 地址:，送货地址:</td>
                  <td>
                    紧接下一元素的标题
                  </td>
                  <td>
                    <JInput v-model="headSets.addressNext"></JInput>
                  </td>
                  <td colspan="3">如： 电话：，如果已经是表头的最后一个元素，留空</td>
                </tr>

                </tbody>
              </table>
            </div>
          </div>
        </fieldset>
      </div>
      <div style="margin-top: 10px;">
        <fieldset>
          <legend>
            <span class="required">* 表格中商品信息</span>

          </legend>
          <div>
            <div style="color: dodgerblue;margin-bottom: 10px;">
              由于系统主要功能是统计数量，所以 商品名称，单位，规格，数量，为最重要元素。表格的扫描从上到下，一旦发现有合并单元格就结果整个表格的扫描。因为合并单元格当作为结束了商品行信息。
              表尾信息不做扫描输入。
            </div>
            <table>
              <tbody>
              <tr>
                <td>
                  商品名称的标题：
                </td>
                <td>
                  <JInput v-model="goodSets.invName"></JInput>
                </td>
                <td>
                  如：（ 商品名称，名称）
                </td>
              </tr>
              <tr>
                <td>
                  规格的标题：
                </td>
                <td>
                  <JInput v-model="goodSets.spec"></JInput>
                </td>
                <td>
                  如：规格，（规格可以是  整数如果 12表示 1件有12瓶，也可以 是  1*12 这种表示）
                </td>
              </tr>
              <tr>
                <td>
                  单价的标题：
                </td>
                <td>
                  <JInput v-model="goodSets.price"></JInput>
                </td>
                <td>
                  如：（ 单价， 价格，售价 ）等 可以是 数字 如300.00或者 （300.00/件 带有单位的价格）
                </td>
              </tr>
              <tr>
                <td>
                  单位的标题：
                </td>
                <td>
                  <JInput v-model="goodSets.unit"></JInput>
                </td>
                <td>
                  如：单位, 计量单位
                </td>
              </tr>
              <tr>
                <td>
                  数量的标题：
                </td>
                <td>
                  <JInput v-model="goodSets.qty"></JInput>
                </td>
                <td>
                  如：数量，出库数量
                </td>
              </tr>
              <tr>
                <td>
                  返利的标题：
                </td>
                <td>
                  <JInput v-model="goodSets.disAmount"></JInput>
                </td>
                <td>
                  如：返利，折让金额
                </td>
              </tr>
              <tr>
                <td>
                  金额的标题：
                </td>
                <td>
                  <JInput v-model="goodSets.amount"></JInput>
                </td>
                <td>
                  如：金额
                </td>
              </tr>
              <tr>
                <td>
                  备注的标题：
                </td>
                <td>
                  <JInput v-model="goodSets.remark"></JInput>
                </td>
                <td>
                  如：备注
                </td>
              </tr>
              </tbody>
            </table>

          </div>
        </fieldset>
      </div>
    </div>
   <div class="tc" style="height: 90px;padding-top: 10px;">
     <j-button type="info" @click="confirm">确定</j-button>
   </div>
  </tiny-dialog-box>

</div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import tool from "@/utils/tool.js";
const videoLength = ref('')
const state = ref({
  maxArea: '',
  sendPrintName: '',
  billInfos: []
})
const billTitle = ref('')
const headSets = ref({
  billDate: '',
  billDateLen: '',
  billNo: '',
  billMinLen: '',
  billMaxLen: '',
  buName: '',
  buNameNext: '',
  address: '',
  addressNext: ''
})
const goodSets = ref({
  invName: '',
  spec: '',
  price: '',
  unit: '',
  qty: ''
})
const showPop = ref(false)

onMounted(() => {
  getSets()
  window.setArea = setArea
})
const alt = (item, index) => {
  billTitle.value = item.billTitle
  headSets.value = tool.xe.clone(item.headSets, true)
  goodSets.value = tool.xe.clone(item.goodSets, true)
  showPop.value = true
}
const del = (item, index) => {
  state.value.billInfos.splice(index, 1)
}
const add = () => {
  billTitle.value = ''
  for (let i in headSets.value) {
    headSets.value[i] = ''
  }
  for (let i in goodSets.value) {
    goodSets.value[i] = ''
  }
  showPop.value = true
}
const confirm = () => {
  if(!billTitle.value) return tool.err('请输入标题')
  billTitle.value = tool.xe.trim(billTitle.value.replace('（', '(').replace('）',')').replace('：',':').replace('，',','))
  if(headSets.value.billDate) headSets.value.billDate = tool.xe.trim(headSets.value.billDate.replace('（', '(').replace('）',')').replace('：',':').replace('，',','))
  if(headSets.value.billDateLen) headSets.value.billDateLen = tool.xe.toNumber(headSets.value.billDateLen)
  if(headSets.value.billNoLen) headSets.value.billNoLen = tool.xe.toNumber(headSets.value.billNoLen)
  if(headSets.value.billNo) headSets.value.billNo = tool.xe.trim(headSets.value.billNo.replace('（', '(').replace('）',')').replace('：',':').replace('，',','))
  if(headSets.value.buName) headSets.value.buName = tool.xe.trim(headSets.value.buName.replace('（', '(').replace('）',')').replace('：',':').replace('，',','))
  if(headSets.value.buNameNext) headSets.value.buNameNext = tool.xe.trim(headSets.value.buNameNext.replace('（', '(').replace('）',')').replace('：',':').replace('，',','))
  if(headSets.value.address) headSets.value.address = tool.xe.trim(headSets.value.address.replace('（', '(').replace('）',')').replace('：',':').replace('，',','))
  if(headSets.value.addressNext) headSets.value.addressNext = tool.xe.trim(headSets.value.addressNext.replace('（', '(').replace('）',')').replace('：',':').replace('，',','))
  if(goodSets.value.invName) goodSets.value.invName = tool.xe.trim(goodSets.value.invName.replace('（', '(').replace('）',')').replace('：',':').replace('，',','))
  if(goodSets.value.spec) goodSets.value.spec = tool.xe.trim(goodSets.value.spec.replace('（', '(').replace('）',')').replace('：',':').replace('，',','))
  if(goodSets.value.price) goodSets.value.price = tool.xe.trim(goodSets.value.price.replace('（', '(').replace('）',')').replace('：',':').replace('，',','))
  if(goodSets.value.unit) goodSets.value.unit = tool.xe.trim(goodSets.value.unit.replace('（', '(').replace('）',')').replace('：',':').replace('，',','))
  if(goodSets.value.qty) goodSets.value.qty = tool.xe.trim(goodSets.value.qty.replace('（', '(').replace('）',')').replace('：',':').replace('，',','))


  let row = {
    billTitle: billTitle.value,
    headSets: tool.xe.clone(headSets.value, true),
    goodSets: tool.xe.clone(goodSets.value, true),
  }

  let hasone = false
  let key = -1
  for (let i = 0; i < state.value.billInfos.length; i++) {
    if(state.value.billInfos[i].billTitle === billTitle.value) {
      hasone = true
      key = i
      break
    }
  }
  if(!hasone) {
    state.value.billInfos.push(row)
  }
  else {
    state.value.billInfos[key] = row
  }
  showPop.value = false
}
const getSets = () => {
  tool.post('app/py',{which: 'getPsSets' }, true).then(ret => {
    if(ret && ret.data) {
      state.value = JSON.parse(ret.data.sets)
    }
  })
}
const setArea = (area) => {
  if(area) {
    state.value.maxArea = area
  }
}
const takeArea = () => {
  if(typeof qt !== 'undefined') {
    new QWebChannel(qt.webChannelTransport, function (channel) {
      // 获取 Python 中注册的对象
      window.bridge = channel.objects.bridge;
      let send = {
        name: "getMaxArea"
      }
      window.bridge.send_message(JSON.stringify(send), function (response) {

      })
    });
  }
}

const save = () => {
  if(!state.value.maxArea) return tool.err('请输入面积')
  if(!state.value.sendPrintName) return tool.err('请输入打印机名称')

  tool.post('app/py',{which: 'savePsSets', formData: state.value}, true).then(ret => {

  })

}


</script>
<style scoped lang="scss">
.goods {
  table {
    border-collapse: collapse;
  }
  td,th {
    border: 1px solid #01aaee;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
  }
}
.title {
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  background-color: #01aaee;
  color: white;
  height: 40px;
  line-height: 40px;
}
td {
  font-size: 14px;
}
.required {
  color: red;
}
</style>